<template>
	<view class="page">
		<view class="product-list">
			<view class="product " v-for="(product,index) in productList" :key="index" @tap="goBrowser(product.name,product.isopen)">
				<view class="image-view ">
					<image  class="product-image" :src="product.image"></image>
					<view class="pay-desc">
						<view class="pay-title">{{product.title}}</view>
						<view class="pay-title-s">{{product.desc}}</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				title: 'product-list',
				productList: [{
						image: '../../../static/alipay.png',
						title: '支付宝支付',
						desc: '推荐已经安装支付宝客户端的用户使用',
						name: 'alipay',
						isopen: true
					},
					{
						image: '../../../static/card.png',
						title: '银行卡转账',
						desc: '支持银行卡汇款，此功能暂时关闭',
						name: 'card',
						isopen: false
					}],
				renderImage: false
			};
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userName', 'gameApiUrl', 'gameApiId', 'gameApiSecret']),
		onLoad() {
			
		},
		methods: {
			
			goBrowser: function(name, open) {
				if (!this.hasLogin) {
					uni.showModal({
						title: '未登录',
						content: '您未登录，需要登录后才能充值',
						/**
						 * 如果需要强制登录，不显示取消按钮
						 */
						showCancel: !this.forcedLogin,
						success: (res) => {
							if (res.confirm) {
								/**
								 * 如果需要强制登录，使用reLaunch方式
								 */
								if (this.forcedLogin) {
									uni.navigateTo({
										url: '../user/login'
									})
								} else {
									uni.navigateTo({
										url: '../user/login'
									});
								}
							}
						}
					});
				} else {
					if (open) {
						uni.navigateTo({
							url: 'deposit'
						});
					} else {
						uni.showModal({
							title: '提醒',
							content: '此功能暂时关闭，谢谢',
							/**
							 * 如果需要强制登录，不显示取消按钮
							 */
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									uni.navigateBack();

								} 
							}
						});
					}

				}


			}
		},
		onLoad() {
			
		},
		onPullDownRefresh() {

		},
		onReachBottom() {
		
		}
	};
</script>

<style>
	page {
		background-color: #eee !important;
		
	}

	

	.product-list {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.product {
		width: 96%;
		height: 150upx;
		line-height: 150upx;
		margin: 20upx 2%;
		border: 1px solid #c8c7cc;
		border-radius: 10px;

	}

	.image-view {
		height: auto;
		width: auto;
		padding: 20upx;

	}

	.product-image {
		height: 120upx;
		width: 130upx;
		float: left;
	}

	.pay-desc {
		float: left;
		padding-left: 35upx;
	}

	.pay-title-s {
		font-size: 21upx;
		height: 40upx;
		line-height: 40upx;
		color: #6D6D6D;

	}

	.pay-title {
		font-size: 42upx;
		height: 70upx;
		line-height: 80upx;
		color: #000000;
	}

	.product-title {
		width: auto;
		font-size: 32upx;
		padding-bottom: 10upx;
		word-break: break-all;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.product-price {
		font-size: 28upx;
		position: relative;
	}

	.product-price-original {
		color: #e80080;
	}

	.product-price-favour {
		color: #888888;
		text-decoration: line-through;
		margin-left: 10upx;
	}

	.product-tip {
		position: absolute;
		right: 10upx;
		background-color: #ff3333;
		color: #ffffff;
		padding: 0 10upx;
		border-radius: 5upx;
	}
</style>
